<template>
	<view class="detail">
		<view class="uni-cardList">
			<uni-card margin="0" title="基础信息">
				<view class="content">
					<view class="content_list">
						<view>序列号:</view>
						<view class="content_item">{{basicInfo.baseInfo.deviceSn||'--'}}</view>
					</view>
				</view>
			</uni-card>
		</view>


		<!--  -->

		<view class="uni-cardList">
			<uni-card margin="0" title="发电">
				<view class="content_dcList">
					<view class="content_item">
						<view class="dcList_item dtitle"><text>直流</text></view>
						<view class="dcList_item">电压</view>
						<view class="dcList_item">电流</view>
						<view class="dcList_item">功率</view>
					</view>
					<view class="content_item" >
						<view class="dcList_item">PV1</view>
						<view class="dcList_item">{{basicInfo.voltage||'--'}}V</view>
						<view class="dcList_item">{{basicInfo.current||'--'}}A</view>
						<view class="dcList_item">{{basicInfo.rate||'--'}}W</view>
					</view>
				</view>
				<view class="content_dcList acList">
					<view class="content_item">
						<view class="dcList_item atitle"><text>交流</text></view>
						<view class="dcList_item">电压</view>
						<view class="dcList_item">电流</view>
						<view class="dcList_item">频率</view>
					</view>
					<view class="content_item" >
						<view class="dcList_item">--</view>
						<view class="dcList_item">--</view>
						<view class="dcList_item">--</view>
						<view class="dcList_item">--</view>
					</view>
				</view>
			</uni-card>
		</view>

		<!--  -->
		<view class="uni-cardList">
			<uni-card margin="0" title="电网">
				<view class="content power_basic">
					<view class="content_list">
						<view>直流输入总功率:</view>
						<view class="content_item">--W</view>
					</view>
					<view class="content_list">
						<view>累计发电量(有功):</view>
						<view class="content_item">--MWh</view>
					</view>

					<view class="content_list">
						<view>当日发电量(有功):</view>
						<view class="content_item">{{basicInfo.baseInfo.dayPower||'--'}}MWh</view>
					</view>
				</view>
			</uni-card>
		</view>
		
		<!-- 历史数据 -->
		<view class="uni-cardList">
			<uni-card margin="0" title="历史数据">
				<view class="select_date">
					<view class="select_date_item" :class="timeType===index+1?'active':'noActive'"
						@click="selectDate(index+1)" v-for="(item,index) in ['日','月','年']" :key="index">{{item}}</view>
				</view>
				<!-- 图表 -->
				<view class="charts">
					<qiun-data-charts v-if="JSON.stringify(historyInfo)!=='{}' "  type="column" :opts="opts" :chartData="chartData" :ontouch='true' />
					<o-empty v-else/>
				</view>
				
		</uni-card>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getDeviceQueryMonitorDetails,getDeviceMonitorHistoryData
	} from "@/common/api/api.js"
	export default {
		props: {
			did: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				basicInfo: {
					baseInfo:{
						deviceSn:'--'
					}
				},
				historyInfo:{},
				timeType:1,
				chartData: {
					categories: [],
					series: []
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataLabel: false,
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					title: {
						name: 'MWh'
					},
					xAxis: {
						disableGrid: true,
						itemCount: 10,
						rotateLabel:true,
						rotateAngle:45,
						marginTop:10
					},
					yAxis: {
						showTitle: true,
						data: [
							// 多Y轴配置
							{
								title: "MWh", // 当前Y轴标题（需要上面showTitle设置为true）
								min: 0, // 当前Y轴起始值（默认数据中的最小值）
							},
						],
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.getData()
			})
		},
		methods: {
			selectDate(index){
				if(index === this.timeType){
					return
				}
				this.timeType  = index
				this.chartData= {
					categories: [],
					series: []
				},
				this.getHistoryData(index)
			},
			async getData(index=1) {
				let res = await getDeviceQueryMonitorDetails({
					id: this.did
				})
				this.basicInfo = res.data
				this.getHistoryData(1)
			},
			async getHistoryData(index){
				this.chartData.categories= []
				this.chartData.series= []
				let res = await getDeviceMonitorHistoryData({
					timeType:index,
					monitorSn:this.basicInfo.baseInfo.deviceSn
				})
				this.historyInfo  = res.data
				let datas=[];
				let data=[];
				for(let [key,value] of Object.entries(res.data)){
					datas.push([key,value])
				}
				let sortDatas =  datas.sort((a,b)=>a[0].slice(-2)-b[0].slice(-2))
				sortDatas.forEach(item=>{
					this.chartData.categories.push(item[0])
					data.push(item[1])
				})
				this.chartData.series = [{
					name: "发电量(MWh)",
					data
				}]
			}
		}
	}
</script>

<style scoped lang='scss'>
	.uni-cardList {
		margin-top: 8rpx;
		.select_date {
			padding: 10rpx;
			display: flex;
			justify-content: space-around;
		
			.select_date_item {
				border-radius: 10rpx;
				border: 2rpx solid #ccc;
				padding: 10rpx 40rpx;
			}
		
			.active {
				background-color: #3e6ff0;
				color: #fff;
			}
		
			.noActive {
				background-color: #fff;
				color: #333;
			}
		}
		.charts{
			height: 500rpx;
			width: 100%;
			.o-empty{
				height: 100%;
			}
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;

		.content_list {
			width: 50%;
			font-size: 24rpx;
			padding: 8rpx 0;

			.content_item {
				color: #333;
			}
		}
	}

	.power_basic {
		border-top: 2rpx solid #ccc;
	}

	.acList {
		margin-top: 16rpx;
		border-top: 2rpx solid #ccc;
	}

	.content_dcList {
		.content_item {
			padding: 8rpx 0;
			display: flex;
			flex-wrap: wrap;

			.dcList_item {
				width: 25%;
			}

			.dtitle {
				text {
					background-color: #008B8B;
					padding: 4rpx;
					color: #fff;
				}
			}

			.atitle {
				text {
					background-color: #CD853F;
					padding: 4rpx;
					color: #fff;
				}
			}
		}
	}
</style>